<style lang="scss" scoped>
    .mshop-price {
        display: inline-block;

        .price {
            color: red;

            &::before {
                content: '￥';
                position: relative;
                top: 1.4px;
            }
        }

        .radio {
            color: red;

            &::after {
                content: '积分';
                position: relative;
                padding-left: .3em;
                font-size: 90%;
                white-space: nowrap;
            }
        }
    }
</style>

<template>
    <div class="mshop-price" >
        <p class="price" v-if="price_type === 'price'">{{ fixed_price }}</p>
        <p class="radio" v-if="price_type === 'radio'">{{ fixed_price }}</p>
    </div>
</template>

<script>
    import getters from '../../vuex/getters'
    import ShopType from '../../shop-type'

    export default {
        props: {
            price: {
                required: true
            },
            ratio: Number
        },
        computed: {
            fixed_price () {
                if (!this.price) return 0;

                const prices = this.price.toString().split('-').map(Number).map(source_price => {
                    if (this.price_type !== 'price') {
                        return Math.ceil(source_price) * (this.ratio || this.shop_type.ratio);
                    }

                    let price = source_price;

                    const fixed = this.shop_type.fixed || 2;
                    const last_index = price.toString().lastIndexOf('.');
                    const length = price.toString().length;

                    if (last_index > -1 && length - last_index > fixed + 1) {
                        price = new Number(price.toFixed(fixed)) * Math.pow(10, fixed) + 1;
                        price = new Number((price / Math.pow(10, fixed)).toFixed(fixed))
                    }

                    return price;
                });

                if (prices.length > 1) return prices.join('-');
                return prices[0];
            }
        },
        data: () => ({
            price_type: 'price',
        }),
        ready () {
            this.price_type = ShopType.get_price_type(this.shop_type);
        },
        vuex: {
            getters
        }
    }
</script>
